.cms-editor-wrapper {
    display: flex;
    flex-direction: column;
    .cms-page-header {
        height: 64px;
        width: 100%;
        background-color: #001529;
        .ant-page-header-content {
            padding-top: 0;    
        }
    }
    .cms-editor-container {
        width: 100%;
        flex: 1;
        height: calc(100vh - 64px);
        background-color: $bgColor;
        position: relative;
        display: flex;
        .cms-page-header {
            width: 100%;
        }
        .left-component-wrapper {
            width: 360px;
            @include white-box-with-shadow;
            @include flex-level-center;
        }
        .main-edit-wrapper {
            flex: 1;
            overflow: auto;
            position: relative;
            width: 100%;
            .main-edit-scroll {
                min-width: 1000px;
                min-height: calc(100vh - 64px);
                padding: 100px 0;
                overflow: auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .editor-main {
                width: 800px;
                height: 800px;
                overflow: auto;
                background: #FFF;
            }
        }
        .right-attribute-wrapper {
            width: 360px;
            overflow: auto;
            @include white-box-with-shadow;
            @include flex-level-center;
            padding: 0;
        }
        .tab-wrapper {
            width: 100%;
        }
    }
}

.preview-modal {
    .preview-container {
        width: 100%;
        height: 80vh;
        display: flex;
    }
    .preview-wrapper {
        flex: 1;
    }
    .preview-config {
        width: 400px;
        border-left: 1px solid #eee;
        box-shadow: 0px 1px 2px -2px rgba(190, 202, 218, 0.16), 0px 3px 6px rgba(190, 202, 218, 0.12), 0px 2px 11px rgba(190, 202, 218, 0.17);
        overflow: auto;
    }
}